
<!DOCTYPE html>
<html>

<head>
    <script src="http://platform.twitter.com/anywhere.js?id=tvVKxNQzsKW4b0RtbS8A&v=1"></script>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script src="http://dev.jtsage.com/cdn/datebox/1.0.0/jquery.mobile.datebox-1.0.0.min.js"></script>
    <script src="global.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SiNT - SiNT is Not Toledo</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <link rel="stylesheet" href="http://dev.jtsage.com/cdn/datebox/1.0.0/jquery.mobile.datebox-1.0.0.min.css" />
</head>


<body>

<script type="text/javascript">
    $('#landing').live( 'pagecreate',function(event){
        init();
    });

</script>

<!-- Start of first page: #landing -->
<div data-role="page" id="landing" style="text-align: center">

    <div id="landing-header" data-role="header">
        <h1>Welcome to SiNT!</h1>
    </div><!-- /header -->

    <div id="landing-content" data-role="content">
        <h2>Welcome to SiNT</h2>

        <p>It looks like you're not logged in yet. </p>
        
        <p>Press the connect with Twitter
            button to log in using your Twitter account.</p>
    </div><!-- /content -->
    <!--<a href="#home" id="gotoHomebtn" data-role="button" data-icon="star" data-rel="page" data-transition="slidedown">Home</a>-->
    <div data-role="footer" data-theme="a">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page one -->


<!-- Start of second page: #two -->
<div data-role="page" id="home" data-theme="a">

    <div data-role="header">
            <a href="#courses" class="coursebtn" data-icon="grid" data-rel="dialog" data-transition="slidedown">Courses</a>
            <a href="#landing" class="logbtn" data-icon="arrow-l" data-rel="dialog" data-transition="slidedown">Logout</a>
            <h1>SiNT</h1>
            <div data-role="navbar">
                <ul>
                    <li><a href="#home" data-icon="home" class="homebtn">Home</a></li>
                    <!--<li><a data-icon="grid" href="#menu" id="temp">Vakken</a></li>-->
                    <li><a data-icon="check" href="#todo" class="todobtn">TODO-Lijst</a></li>
                </ul>
            </div> <!-- end navbar -->
        <div class="content-primary">
        <ul data-role="listview" id="personal-score">
            <li><img id="userpic" src="img/placeholder-2.png" />
                <h1 id="username">USERNAME</h1>
                <h2><a id="score" href="#leaderboard" data-rel="dialog">SCORE</a></h2>
            </li>
        </ul>
        </div>
    </div> <!-- end header -->

    <div data-role="content" data-theme="a">
        <ul id="home-stream" data-role="listview" data-filter="true" data-filter-theme="a">
        </ul>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page two -->


<!-- Start of third page: #vakken -->
<div data-role="page" id="courses">

    <div data-role="header" data-theme="a">
        <h1>Vakken</h1>
        <a href="#addcourse" id="addcoursebtn" data-rel="dialog" data-role="button" data-icon="plus">Add course</a>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">
        <ul id="courseslist" data-role="listview"></ul>
        <p><a data-rel="back" data-role="button" data-inline="true" data-icon="back">Back</a></p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->

<div data-role="page" id="coursepage" data-theme="a">

    <div data-role="header">
        <a href="#courses" class="coursebtn" data-icon="grid" data-rel="dialog" data-transition="slidedown">Courses</a>
        <a href="#landing" class="logbtn" data-icon="arrow-l" data-rel="dialog" data-transition="slidedown">Logout</a>
        <h1 id="headertitle">SiNT</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#home" data-icon="home">Home</a></li>
                <!--<li><a data-icon="grid" href="#menu" id="temp">Vakken</a></li>-->
                <li><a data-icon="check" href="#todo">TODO-Lijst</a></li>
            </ul>
        </div> <!-- end navbar -->
        <div data-theme="d" style="text-align: center;">
            <h2 id="coursename">COURSENAME</h2>
            <h1 ><a id="coursescore" href="#courseleaderboard" data-rel="dialog">COURSE_SCORE</a></h1>
        </div>
        <div class="ui-grid-b" id="buttonBar" style="text-align: center;" data-theme="a">
            <div class="ui-block-a">
                <p></p><a href="#questions" id="questionsbtn" data-rel="dialog"></p>
                <img src="/img/question.png" width="48" height="48" />
            </a>
            </div>
            <div class="ui-block-b">
                <a href="#tweet" data-rel="dialog" id="tweetbtn">
                    <p></p><img src="/img/twitter.png" width="48" height="48" /></p>
                </a>
            </div>
            <div class="ui-block-c" id="checkinbtn">
                <a href="#checkin">
                    <p></p><img src="/img/check_in.png" width="48" height="48" /></p>
                </a>
            </div>
        </div><!-- /grid-b -->
    </div> <!-- end header -->

    <div data-role="content" data-theme="a">

        <ul id="course-stream" data-role="listview" data-filter="true" data-filter-theme="a">
        </ul>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page two -->

<div data-role="page" id="leaderboard">

    <div data-role="header" data-theme="a">
        <h1>Global Leaderboard</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">
        <ul id="leaderboardlist" data-role="listview"></ul>
        <p><a data-rel="back" data-role="button" data-inline="true" data-icon="back">Back</a></p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->

<div data-role="page" id="courseleaderboard">

    <div data-role="header" data-theme="a">
        <h1>Course Leaderboard</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">
        <ul id="courseleaderboardlist" data-role="listview"></ul>
        <p><a data-rel="back" data-role="button" data-inline="true" data-icon="back">Back</a></p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->

<div data-role="page" id="questions">

    <div data-role="header" data-theme="a">
        <h1>Course Questions</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">
        <p><a href="#askquestion" id="askquestionbtn" data-rel="dialog" data-role="button" style="margin-bottom: 30px;">Ask a question</a> </p>
        <ul id="questionlist" data-role="listview"></ul>
        <p><a data-rel="back" data-role="button" data-inline="true" data-icon="back">Back</a></p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->

<div data-role="page" id="askquestion">

    <div data-role="header" data-theme="a">
        <h1>Ask a question</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">
       <form id="questionform" action="addquestion" method="post">
        <label for="question_body" class="ui-hidden-accessible">Type your question:</label>
        <textarea type="text" name="question" id="question_body">Type your question...</textarea>
        <input type="hidden" id="studentidinput" name="studentid" value="">
        <input type="hidden" id="courseidinput" name="courseid" value="">
        <button id="questionsubmitbtn" type="submit" data-theme="a">Submit</button>
       </form>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->

<div data-role="page" id="tweet">

    <div data-role="header" data-theme="a">
        <h1>Tweet</h1>
    </div><!-- /header -->

    <div id="tweethere" data-role="content" data-theme="a">
       
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->

<div data-role="page" id="questionpage">
    <div data-role="header" data-theme="a">
        <a data-rel="back" data-role="button" data-inline="true" data-icon="back">Back</a>
        <a href="#landing" class="logbtn" data-icon="arrow-l" data-rel="dialog" data-transition="slidedown">Logout</a>
        <h1>Question</h1>
    </div><!-- /header -->
    <div data-role="content" data-theme="a">
        <div id="questioncontent" style="text-align:center;">
            <h2 id="questionbody">
                WHAT IS THE MEANING OF LIFE?
            </h2>
            <p>By: <strong id="questionauthor">
                authorname
            </strong></p>
            <p>In: <strong id="questioncourse">
                coursename
            </strong></p>
            <p>
                <a href="#addanswer" data-role="button" data-icon="star" data-rel="dialog" style="margin-bottom: 30px;">
                    Answer
                </a>
            </p>
            <p></p>
        </div>
        <ul id="answerlist" data-role="listview">
        </ul>
    </div>
    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div>

<div data-role="page" id="addanswer">

    <div data-role="header" data-theme="a">
        <h1>Answer question</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">
        <form id="answerform" action="addanswer" method="post">
            <label for="answer_body" class="ui-hidden-accessible">Type your answer:</label>
            <textarea type="text" name="answer" id="answer_body">Type your answer...</textarea>
            <input type="hidden" id="studentidinput_ans" name="studentid" value="">
            <input type="hidden" id="questionidinput_ans" name="questionid" value="">
            <button id="answersubmitbtn" type="submit" data-theme="a">Submit</button>
        </form>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->

<div data-role="page" id="addcourse">

    <div data-role="header" data-theme="a">
        <h1>Add a course</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">
        <ul id="allcourseslist" data-role="listview" data-filter="true" data-filter-theme="a"></ul>
        <p><a data-rel="back" data-role="button" data-inline="true" data-icon="back">Back</a></p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->

<div id="todo" data-role="page">
    <div data-role="header" data-theme="a">
    	<a data-rel="back" data-role="button" data-inline="true" data-icon="back">Back</a>
        <h1>TODO list</h1>
        <div data-role="navbar">
                <ul>
                    <li><a href="#home" data-icon="home" class="homebtn">Home</a></li>
                    <!--<li><a data-icon="grid" href="#menu" id="temp">Vakken</a></li>-->
                    <li><a data-icon="check" href="#todo" class="todobtn">TODO-Lijst</a></li>
                </ul>
        </div> <!-- end navbar -->
    </div><!-- /header -->

    <div data-role="content" data-theme="a">
       <ul id="todolist" data-role="listview"></ul>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div>

<div data-role="page" id="addtodo">

    <div data-role="header" data-theme="a">
        <h1>Enter todo description</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">
        <form id="todoform" action="addtodo" method="post">
            <label for="description_body">Description:</label>
            <textarea type="text" name="description" id="description_body">Type your description...</textarea>
            <label for="deadline_date">Deadline date</label>
            <input name="deadline_date" type="date" data-role="datebox" data-options='{"afterToday": true, "dateFormat": "DD-mm-YYYY", "fieldsOrder": ["d", "m", "y"]}' id="deadline_date" />
            <label for="deadline_time">Deadline time</label>
            <input name="deadline_time" type="date" data-role="datebox" data-options='{"mode":"timebox", "timeFormats" : {"12": "GG:ii:ss", "24":"HH:ii:ss"}, "timeFormatOverride" : "24"}' id="deadline_time" />
            <input type="hidden" id="studentidinput_todo" name="studentid" value="">
            <input type="hidden" id="itemidinput_todo" name="itemid" value="">
            <button id="descriptionsubmitbtn" type="submit" data-theme="a">Submit</button>
        </form>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>SiNT 2011</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->

</body>
</html>